import { SidebarController } from "@renderer/components/business/sidebar/sidebar-controller";
import { SearchField } from "@renderer/components/ui/base/search-field";
import {
  Sidebar,
  SidebarContent,
  SidebarDisclosure,
  SidebarDisclosureGroup,
  SidebarDisclosurePanel,
  SidebarDisclosureTrigger,
  SidebarInset,
  SidebarLabel,
} from "@renderer/components/ui/base/sidebar";
import { useSideBar } from "@renderer/hooks/use-side-bar";
import { useThread } from "@renderer/hooks/use-thread";
import { useTranslation } from "react-i18next";
import { ThreadItem } from "./thread-item";

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
  children: React.ReactNode;
}

export function AppSidebar(props: AppSidebarProps) {
  const { t } = useTranslation("translation", { keyPrefix: "sidebar" });
  const { activeThreadId, handleClickThread } = useThread();
  const {
    isSidebarCollapsed,
    groupedThreads,
    filteredGroupedThreads,
    searchQuery,
    setSearchQuery,
  } = useSideBar();

  const currentThreads = searchQuery.trim()
    ? filteredGroupedThreads
    : groupedThreads;

  const defaultExpandedKeys = [
    "today",
    "yesterday",
    "last7Days",
    "last30Days",
    "earlier",
  ] as const;

  return (
    <div className="flex h-[calc(100vh-var(--title-bar-height)+1px)] w-full flex-1 flex-row">
      <Sidebar
        className="mt-[calc(var(--title-bar-height)+1px)] border-none bg-sidebar"
        {...props}
      >
        <div className="my-2 flex flex-col gap-y-3 pr-2.5 pl-4">
          <div className="flex flex-row items-center justify-between gap-x-3">
            <SearchField
              className="h-10 rounded-[10px] bg-bg shadow-none"
              placeholder={t("search.placeholder")}
              value={searchQuery}
              onChange={setSearchQuery}
            />
            {!isSidebarCollapsed && <SidebarController />}
          </div>
        </div>

        <SidebarContent
          className="max-h-[calc(100vh-var(--title-bar-height)-68px)] py-0 pr-2 pl-4"
          style={{
            scrollbarGutter: "stable",
          }}
        >
          <SidebarDisclosureGroup
            className="gap-y-[10px]"
            defaultExpandedKeys={defaultExpandedKeys}
          >
            {currentThreads.map(({ key, label, threads }) => (
              <SidebarDisclosure
                className="flex flex-col gap-y-1"
                id={key}
                key={key}
              >
                <SidebarDisclosureTrigger className="h-10 rounded-[10px] px-3">
                  <SidebarLabel className="text-label-fg">{label}</SidebarLabel>
                </SidebarDisclosureTrigger>
                <SidebarDisclosurePanel className="gap-y-1">
                  {threads.map((thread) => {
                    const { id } = thread;
                    const isCurrent = id === activeThreadId;
                    return (
                      <ThreadItem
                        key={id}
                        id={id}
                        isCurrent={isCurrent}
                        onThreadClick={handleClickThread}
                        thread={thread}
                      />
                    );
                  })}
                </SidebarDisclosurePanel>
              </SidebarDisclosure>
            ))}
          </SidebarDisclosureGroup>
        </SidebarContent>
      </Sidebar>

      <SidebarInset>{props.children}</SidebarInset>
    </div>
  );
}
